import React from 'react';
import ReactEcharts from 'echarts-for-react';

let colorMaps = {
    '一般':{     
        type:'linear',
        x:0,
        y:0,
        x2:1,
        y2:0,
        colorStops:[
            { offset:0, color:'#f5423b' },
            { offset:1, color:'#f29c15' },
        ]           
    },
    '良好':{     
        type:'linear',
        x:0,
        y:0,
        x2:1,
        y2:0,
        colorStops:[
            { offset:0, color:'#f5423b' },
            { offset:1, color:'#f29c15' },
        ]           
    },
    '优秀':{     
        type:'linear',
        x:0,
        y:0,
        x2:1,
        y2:0,
        colorStops:[
            { offset:0, color:'#f5423b' },
            { offset:0.5, color:'#f29c15' },
            { offset:1, color:'#17c231' }
        ]           
    },
}
function GaugeChart() {
    let seriesData = [];
    let rank = '优秀';
    seriesData.push({      
        type: 'gauge',
        radius:'90%',
        center:['50%', '55%'],
        startAngle: 190,
        endAngle: -10,
        min: 0,
        max: 100,
        itemStyle: {
            color:colorMaps[rank],
            // color:{
            //     type:'linear',
            //     x:0,
            //     y:0,
            //     x2:1,
            //     y2:0,
            //     colorStops:[
            //         { offset:0, color:'#f5423b' },
            //         { offset:0.5, color:'#f29c15' },
            //         { offset:1, color:'#17c231' }
            //     ]
            // },
            shadowColor: 'rgba(0,138,255,0.45)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
        },
        progress: {
            show: true,
            roundCap: true,
            width: 8
        },
        pointer: {
            show:false,
            icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
            length: '75%',
            width: 16,
            offsetCenter: [0, '5%']
        },
        axisLine: {
            roundCap: true,
            lineStyle: {
                width:8,
                // color:[
                //     [0, '#f5423b'],
                //     [0.5, '#f29c15'],
                //     [1, '#17c231']
                // ]
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisLabel:{ show:false },
        title: {
            show: false
        },
        detail: {
            offsetCenter: [0, 0],
            fontSize:14,
            color:rank === '一般' ? '#f5423b' : rank === '良好' ? '#f29c15' : '#17c231',
            formatter: function (value) {
                return rank;
            }
        },
        data: [
            {
                value:95
            }
        ]     
    })
    return (
        <ReactEcharts
            notMerge={true}
            style={{ height: '100%' }}
            option={{
                series:seriesData
            }}
        />
    )
}

export default GaugeChart;

